<template>
    <div class="user-msg-container">
        <img :src="imgPath" alt="headImg">
        <div style="width: 10px"></div>
        <div>
            <div class="text-container" style="font-weight: bolder">{{nickname}}</div>
            <div class="text-container">
                <div style="display: flex; align-items: center">
                    <img src="../../../assets/main/topper/level.png">
                </div>
                <div>Level{{' ' + level}}</div>
                <div style="width: 10px"></div>
                <div style="display: flex; align-items: center">
                    <img style="width: 15px" src="../../../assets/main/topper/vip/2.png">
                </div>
                <div>{{ vipType==0?'您尚未开通任何Vip':'vip用户' }}</div>
            </div>
        </div>

    </div>

</template>

<script>
import {computed, onMounted, ref} from "vue";
import {useStore} from "vuex";
export default {
    name: "userMsg",
    setup() {
        let store = useStore()
        let imgPath = computed(()=>store.state.userStore.userDetail.profile.avatarUrl)
        let nickname = computed(()=>store.state.userStore.userDetail.profile.nickname)
        let level = computed(()=>store.state.userStore.userDetail.level)
        let vipType = computed(()=>store.state.userStore.userAccount.vipType)


        let vipText = ref('您尚未开通任何Vip')


        function init() {

        }

        onMounted(()=>{

        })

        return {
            imgPath,
            nickname,
            level,
            vipType
        }
    }
}
</script>

<style scoped>
    .user-msg-container {
        padding: 10px 20px 10px 0;
        width: 250px;
        height: calc(100% - 20px);
        display: flex;
    }
    
    .user-msg-container img {
        width: 34px;
        height: 34px;
        border: 3px white solid;
        border-radius: 20px;
    }

    .text-container {
        font-size: small;
        width: auto;
        height: 50%;
        display: flex;
        align-items: center;
        color: white;
    }
    
    .text-container img {
        height: 15px;
        width: 20px;
        border: none;
    }
</style>